<template>
  <div id="practice" style="background: #fff">
    <img style="width: 100%" src="@/assets/practice/banner.png" alt />

    <div
      v-if="!isExam"
      class="title"
      style="
        width: 96%;
        margin: 20px auto;
        display: flex;
        justify-content: space-between;
      "
    >
      <h2 style="margin-left: 20px; font-size: 16px">答题练习</h2>
      <div
        v-if="!isallhistody"
        style="
          font-size: 16px;
          color: #2a8ff7;
          margin-left: 24px;
          cursor: pointer;
        "
        @click="isallhistody = true"
      >
        答题记录
      </div>
      <div
        v-else
        style="
          font-size: 16px;
          color: #2a8ff7;
          margin-left: 24px;
          cursor: pointer;
        "
        @click="isallhistody = false"
      >
        返回
      </div>
    </div>

    <div
      v-else
      class="title"
      style="
        width: 96%;
        margin: 20px auto;
        display: flex;
        justify-content: space-between;
      "
    >
      <h2>当前位置： {{ typeText(type) }}</h2>
      <el-button @click="back">返回</el-button>
    </div>

    <div class="historyalList" v-if="isallhistody">
      <el-table :data="historyalList" style="width: 100%">
        <el-table-column prop="practiceType" label="题目类型">
          <template slot-scope="scope">
            <span>{{
              scope.row.practiceType == 1 ? "每日答题" : "兴趣答题"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="score" label="答对数/答题数">
          <template slot-scope="scope">
            <span
              >{{ scope.row.passIntegral }}/ {{ scope.row.maxIntegral }}</span
            >
          </template>
        </el-table-column>
        <el-table-column prop="lastModifyTime" label="时间"></el-table-column>
        <el-table-column prop="lastModifyTime" label="积分值">
          <template slot-scope="scope">
            <span>{{ scope.row.date }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="cardList" v-if="!isExam && !isallhistody">
      <div class="cardItem" style="width: 289px" @click="choose('daily')">
        <div class="text">
          <div class="h4">每日答题</div>
          <p>太阳每天都是新的</p>
        </div>

        <img src="@/assets/practice/daily.png" alt />
      </div>
      <div class="cardItem" style="width: 289px" @click="choose('interest')">
        <div class="text">
          <div class="h4" style="color: #d96834">兴趣答题</div>
          <p style="color: #d96834">兴趣是最好的老师</p>
        </div>

        <img src="@/assets/practice/xingqu.png" alt />
      </div>
      <div class="cardItem" style="width: 289px" @click="choose('error')">
        <div class="text">
          <div class="h4" style="color: #629483">错题集</div>
          <p style="color: #629483">在错题中吸取经验教训</p>
        </div>

        <img src="@/assets/practice/cuoti.png" alt />
      </div>

      <div class="cardItem" @click="choose('simulate')">
        <div class="text" style="color: #5774e6">
          <div class="h4">模拟练习</div>
          <p>掌握一定的应试技巧 积累考试经验</p>
        </div>
        <img src="@/assets/practice/self.png" alt />
      </div>
      <div class="cardItem" @click="choose('simulation')">
        <div class="text" style="color: #db4883">
          <div class="h4">自主练习</div>
          <p>找出复习漏洞，避免一错再错</p>
        </div>
        <img src="@/assets/practice/simulatio.png" alt />
      </div>
    </div>
    <!-- 每日答题弹窗 -->
    <el-dialog
      title="每日答题"
      :visible="type == 'daily' && !isExam"
      width="652px"
      @close="choose('')"
    >
      <div class="box" style="position: relative">
        <img
          style="width: 100%"
          src="@/assets/practice/select.png"
          alt
          srcset
        />
        <div class="p1">选择题库目录</div>
        <div class="p2">可以选择多个</div>
      </div>
      <el-input
        style="width: 300px; margin: 20px"
        placeholder="输入关键字进行过滤"
        v-model="filterText"
      ></el-input>
      <el-tree
        ref="tree"
        :data="treeData"
        show-checkbox
        node-key="id"
        :default-expanded-keys="[]"
        :default-checked-keys="[]"
        :props="defaultProps"
        :filter-node-method="filterNode"
      ></el-tree>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="choose('')">取 消</el-button> -->
        <el-button type="primary" @click="gotoExam('daily')"
          >进入答题</el-button
        >
      </span>
    </el-dialog>
    <!-- 兴趣答题弹窗 -->

    <el-dialog
      title="兴趣答题"
      :visible="type == 'interest' && !isExam"
      width="652px"
      @close="choose('')"
    >
      <div class="box" style="position: relative">
        <img
          style="width: 100%"
          src="@/assets/practice/select.png"
          alt
          srcset
        />
        <div class="p1">选择题库目录</div>
        <div class="p2">可以选择多个</div>
      </div>
      <el-input
        style="width: 300px; margin: 20px"
        placeholder="输入关键字进行过滤"
        v-model="filterText"
      ></el-input>
      <el-tree
        ref="tree"
        :data="treeData"
        show-checkbox
        node-key="id"
        :default-expanded-keys="[]"
        :default-checked-keys="[]"
        :props="defaultProps"
        :filter-node-method="filterNode"
      ></el-tree>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="choose('')">取 消</el-button> -->
        <el-button type="primary" @click="gotoExam('interest')"
          >进入答题</el-button
        >
      </span>
    </el-dialog>
    <!-- 错题集题弹窗 -->
    <el-dialog
      title="错题集"
      :visible="type == 'error' && !isExam"
      width="652px"
      @close="choose('')"
    >
      <div class="box" style="position: relative">
        <img style="width: 100%" src="@/assets/practice/error.png" alt srcset />
      </div>

      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="choose('')">取 消</el-button> -->
        <el-button type="primary" @click="gotoExam('error')"
          >进入答题</el-button
        >
      </span>
    </el-dialog>
    <!-- 模拟练习弹窗 -->
    <el-dialog
      title="模拟练习"
      :visible="type == 'simulate' && !isExam"
      width="652px"
      @close="choose('')"
    >
      <div class="box" style="position: relative">
        <img style="width: 100%" src="@/assets/practice/moni.png" alt srcset />
      </div>
      <div class="history" v-if="!ishistory" @click="ishistory = true">
        练习记录
      </div>
      <div class="history" v-else @click="ishistory = false">返回</div>
      <div class="config" v-if="!ishistory">
        <div class="item">
          <span>答题时长：{{ baseForm.practiceTimes }}分钟</span>
          <div class="icon"></div>
        </div>
        <div class="item">
          <span>总题数：{{ baseForm.practiceQuestions }}题</span>
          <div class="icon"></div>
        </div>
        <div class="item">
          <span>试卷总分:{{ baseForm.practiceTotalScore }}分</span>
          <div class="icon"></div>
        </div>
        <div class="item">
          <span>及格分：{{ baseForm.practicePassScore }}分</span>
          <div class="icon"></div>
        </div>
      </div>
      <div class="historyList" v-else>
        <el-table :data="historyList" style="width: 100%">
          <el-table-column
            type="index"
            width="50"
            label="序号"
          ></el-table-column>
          <el-table-column prop="score" label="分数"></el-table-column>
          <el-table-column prop="useTime" label="答题用时"></el-table-column>
          <el-table-column prop="lastModifyTime" label="日期"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="choose('')">取 消</el-button> -->
        <el-button type="primary" @click="gotoExam('simulate')"
          >进入答题</el-button
        >
      </span>
    </el-dialog>
    <!-- 自主 -->
    <el-dialog
      title="模拟练习"
      :visible="type == 'simulation' && !isExam"
      width="652px"
      @close="choose('')"
    >
      <div class="box" style="position: relative">
        <img style="width: 100%" src="@/assets/practice/zizhu.png" alt srcset />
      </div>
      <div class="history" v-if="!ishistory" @click="ishistory = true">
        练习记录
      </div>
      <div class="history" v-else @click="ishistory = false">返回</div>

      <div class="config" v-if="!ishistory">
        <div class="item">
          <span>
            答题时长：
            <el-input-number
              style="width: 110px"
              v-model="formConfig.practiceTimes"
              :min="1"
              :max="10000"
              label="描述文字"
            ></el-input-number
            >分钟
          </span>
          <div class="icon"></div>
        </div>
        <div class="item">
          <span>
            总题数：
            <el-input-number
              style="width: 100px"
              v-model="formConfig.practiceQuestions"
              :min="1"
              :max="10000"
              label="描述文字"
            ></el-input-number
            >题
          </span>
          <div class="icon"></div>
        </div>
        <div class="item">
          <span>
            试卷总分:
            <el-input-number
              style="width: 100px"
              v-model="formConfig.practiceTotalScore"
              :min="1"
              :max="10000"
              label="描述文字"
            ></el-input-number
            >分
          </span>
          <div class="icon"></div>
        </div>
        <div class="item">
          <span>
            及格分：
            <el-input-number
              style="width: 100px"
              v-model="formConfig.practicePassScore"
              :min="1"
              :max="10000"
              label="描述文字"
            ></el-input-number
            >分
          </span>
          <div class="icon"></div>
        </div>
      </div>
      <div class="historyList" v-else>
        <el-table :data="historyList" style="width: 100%">
          <el-table-column
            type="index"
            width="50"
            label="序号"
          ></el-table-column>
          <el-table-column prop="score" label="分数"></el-table-column>
          <el-table-column prop="useTime" label="答题用时"></el-table-column>
          <el-table-column prop="lastModifyTime" label="日期"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="choose('')">取 消</el-button> -->
        <el-button type="primary" @click="gotoExam('simulation')"
          >进入答题</el-button
        >
      </span>
    </el-dialog>

    <daily
      ref="daily"
      v-if="type == 'daily' && isExam"
      :questionList="everydayQuestion.questionList"
      @back="back"
    ></daily>

    <interest
      ref="interest"
      v-if="type == 'interest' && isExam"
      :questionList="interestQuestion.questionList"
      @back="back"
    ></interest>

    <simulate
      ref="simulate"
      v-if="type == 'simulate' && isExam"
      :questionList="autonomicQuestion.questionList"
      @back="back"
      @submit="submit"
      :isdetail="isdetail"
    ></simulate>

    <simulate
      ref="simulate"
      v-if="type == 'simulation' && isExam"
      :questionList="autonomicQuestion.questionList"
      @back="back"
      @submit="submit"
      :isdetail="isdetail"
    ></simulate>

    <simulate
      ref="simulate"
      v-if="type == 'error' && isExam"
      :questionList="errorList.questionList"
      @back="back"
      @submit="submit"
      :isdetail="isdetail"
    ></simulate>
  </div>
</template>

<script>
import { formConf } from "@/components/Generator/generator/config";
import meunBtn from "./compents/meunBtn";
import daily from "./practicecompents/daily";
import interest from "./practicecompents/interest";
import simulate from "./practicecompents/simulate";
import { getConfig, categorySelector } from "@/views/exam/api/practice.js";
import {
  generatorEverydayQuestion, //每日
  generatorInterestQuestion,
  generatorSimulateQuestion,
  getList,
  getWrongQuestionList,
  saveSimulateQuestionResult,
} from "@/views/exam/api/temsExamStudy";
export default {
  name: "certificate",
  components: {
    meunBtn,
    daily,
    simulate,
    interest,
  },

  data() {
    return {
      isAdministrator: false,
      currentUserid: "",
      companyId: "",

      filterText: "",
      meunBtnList: [{ name: "全部" }, { name: "未完成" }, { name: "已完成" }],
      defaultProps: {
        children: "children",
        label: "fullName",
      },

      nowTitle: "",
      type: "",
      folders: [],
      treeData: [],
      isExam: false,
      everydayQuestion: { questionList: [] },
      interestQuestion: { questionList: [] },
      autonomicQuestion: { questionList: [] },
      errorList: { questionList: [] },
      historyList: [],
      baseForm: {},
      isdetail: false,
      ishistory: false,
      formConfig: {
        practiceType: "4",
        practicePassScore: 60,
        practiceQuestions: 20,
        practiceTimes: 2,
        practiceTotalScore: 100,
      },
      isallhistody: false,
      historyalList: [],
    };
  },
  created() {
    this.isAdministrator = this.$store.getters.userInfo.isAdministrator;
    this.currentUserid = this.$store.getters.userInfo.userId;
    this.companyId = this.$store.getters.userInfo.organizeId;
  },
  mounted() {
    getConfig().then((res) => {
      this.baseForm = res.data;
      console.log(res);
    });
    this.getcategorySelector();

    this.getallhistory(); //历史
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  methods: {
    handleEdit(idx, row) {
      this.isdetail = true;
      this.isExam = true;
      this.autonomicQuestion = row;
    },
    typeText(type) {
      if (type == "daily") return "每日答题";
      if (type == "interest") return "兴趣答题";
      if (type == "error") return "错题集";

      if (type == "simulate") return "模拟练习";
      if (type == "simulation") return "自主练习";
    },
    back() {
      this.type = "";
      this.isdetail = false;
      this.isExam = false;
      this.ishistory = false;
    },
    gotoExam(type) {
      // console.log()
      if (this.$refs.tree) {
        this.folders = this.$refs.tree.getCheckedKeys();
      } else {
        this.folders = [];
      }
      this.isExam = true;
      this.$nextTick(() => {
        this.type = type;
      });
      if (type == "daily") this.getgeneratorEverydayQuestion();
      if (type == "interest") this.getgeneratorInterestQuestion();
      if (type == "simulate") this.getgeneratorSimulateQuestion();
      if (type == "simulation") this.getgeneratorSimulateQuestion2();
      if (type == "error") {
        this.$message.info("暂未开放");
        this.back();
      }
    },
    getgetWrongQuestionList() {
      getWrongQuestionList().then((res) => {
        this.errorList = { ...res.data };
        this.changeList(this.errorList.questionList);
      });
    },
    getgeneratorEverydayQuestion() {
      generatorEverydayQuestion({
        folders: this.folders,
      }).then((res) => {
        this.everydayQuestion = res.data;
        this.changeList(this.everydayQuestion.questionList);

        // console.log('this.everydayQuestion', this.everydayQuestion)
        this.$nextTick(() => {
          this.$refs.daily.init(0);
        });
      });
    },
    //兴趣
    getgeneratorInterestQuestion() {
      generatorInterestQuestion({
        folders: this.folders,
      }).then((res) => {
        this.interestQuestion = res.data;
        console.log("---interestQuestion", this.interestQuestion);
        this.changeList(this.interestQuestion.questionList);

        // console.log('this.everydayQuestion', this.everydayQuestion)
        this.$nextTick(() => {
          this.$refs.interest.init(0);
        });
      });
    },
    //生成自主答题练习记录
    getgeneratorSimulateQuestion() {
      generatorSimulateQuestion({
        practiceType: "3",
        folders: [],
      }).then((res) => {
        this.autonomicQuestion = res.data;

        this.changeList(this.autonomicQuestion.questionList);
        this.$nextTick(() => {
          this.$refs.simulate.inittime(this.baseForm.practiceTimes * 60);
        });
        console.log("---autonomicQuestion", this.autonomicQuestion);
      });
    },
    //自主练习
    getgeneratorSimulateQuestion2() {
      generatorSimulateQuestion(this.formConfig).then((res) => {
        this.autonomicQuestion = { ...res.data };
        this.changeList(this.autonomicQuestion.questionList);

        this.$nextTick(() => {
          this.$refs.simulate.inittime(this.formConfig.practiceTimes * 60);
        });
        // console.log("---autonomicQuestion", this.autonomicQuestion);
      });
    },

    submit() {
      console.log("submit");
      var autonomicQuestionObj = { ...this.autonomicQuestion };
      autonomicQuestionObj.questionList = this.submitdata(
        autonomicQuestionObj.questionList
      );
      saveSimulateQuestionResult(this.autonomicQuestion).then((res) => {
        console.log(res);
        this.$message.success("交卷成功！");
        this.back();
      });
    },
    choose(type) {
      if (type == "daily" && this.baseForm.everydayQuestionRule == "0") {
        this.isExam = true;

        this.getgeneratorEverydayQuestion();
      }

      if (type == "simulate") this.gethistory(3);
      if (type == "simulation") this.gethistory(4);
      if (type == "error") this.getgetWrongQuestionList();
      this.type = type;
      // console.log(' this.type',  this.type)
    },
    getcategorySelector() {
      categorySelector().then((res) => {
        console.log(res);
        this.treeData = res.data;
      });
    },
    //处理数据结构
    changeList(arr) {
      arr.forEach((el) => {
        if (el.questionType == "selectTi") {
          el.type = "单选题";
          el.options = JSON.parse(el.options);
        } else if (el.questionType == "multiple") {
          el.type = "多选题";
          el.options = JSON.parse(el.options);
        } else if (el.questionType == "determine") {
          el.type = "判断题";
          el.options = JSON.parse(el.options);
        } else if (el.questionType == "blank") {
          el.type = "填空题";
        } else if (el.questionType == "answers") {
          el.type = "问答题";
        }
      });
    },
    gethistory(type) {
      getList({
        creatorUserId: this.currentUserid,
        enabledMark: "1",
        practiceType: type, // 类型，1-每日答题;2-兴趣答题;3-模拟练习;4-自主练习。
      }).then((res) => {
        this.historyList = res.data.list;
      });
    },
    getallhistory() {
      getList({
        enabledMark: "0",
        practiceTypeList: ["1", "2"], // 类型，1-每日答题;2-兴趣答题;3-模拟练习;4-自主练习。
      }).then((res) => {
        this.historyalList = res.data.list;
      });
    },
    submitdata(arr) {
      arr.forEach((el) => {
        if (el.questionType == "selectTi") {
          el.options = JSON.stringify(el.options);
        } else if (el.questionType == "multiple") {
          el.options = JSON.stringify(el.options);
        } else if (el.questionType == "determine") {
          el.options = JSON.stringify(el.options);
        } else if (el.questionType == "blank") {
        } else if (el.questionType == "answers") {
        }
      });
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.fullName.indexOf(value) !== -1;
    },
  },
  beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
.cardItem {
  // width: 289px;
  width: 443px;
  height: 188px;
  margin: 10px;
  color: #3d6c88;
  position: relative;
  float: left;
  cursor: pointer;

  .text {
    position: absolute;
    top: 20px;
    left: 20px;
  }

  .h4 {
    font-size: 16px;
    font-weight: 600;

    margin-bottom: 12px;
  }

  p {
    font-size: 14px;
    font-weight: 400;
  }

  img {
    width: 100%;
  }
}

#practice {
  // padding: 20px;
  float: right;
  margin-top: 20px;
  width: 955px;
  background-color: #fff;

  .cardList {
    //   display: flex;
    //   justify-content: space-between;
    //   flex-wrap: wrap;
  }
}

.config {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  margin-top: 24px;
  padding: 0 0;
  flex-wrap: wrap;

  .item {
    width: 290px;
    height: 90px;
    padding: 24px;
    border-radius: 4px;
    background: #f5f9ff;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;

    span {
      font-size: 16px;
      font-weight: 600;
      line-height: 22px;
    }

    .icon {
      width: 27px;
      height: 27px;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 0;
      position: relative;
      -webkit-user-select: none;
      -moz-user-select: none;
      user-select: none;
    }
  }
}

.historyalList {
  width: 95%;
  margin: 0 auto;
  max-height: 800px;
  overflow-y: auto;
}

.historyList {
  margin-top: 20px;
  max-height: 500px;
  overflow-y: auto;
}

.history {
  display: flex;
  justify-content: flex-end;
  align-items: unset;
  flex-direction: row;
  margin-top: 24px;
  padding: 0 24px;
  font-size: 14px;
  color: #2a8ff7;
  margin-left: 20px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.p1 {
  position: absolute;
  top: 50px;
  left: 30px;
  color: #bb96fb;
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 12px;
  line-height: 1.2;
}

.p2 {
  position: absolute;
  top: 100px;
  left: 30px;
  color: #5ccb78;
  font-size: 20px;
  margin: 0;
  line-height: 1.2;
}

.search {
  padding-bottom: 20px;
  border-bottom: 0.5px solid #e6e6e6;
  margin-top: 20px;
  line-height: 32px;
  width: 100%;

  .appendinput {
    margin-top: -31px;
    width: 200px;
    float: right;
  }
}
</style>
